<script setup lang="ts">
import { useCrumbStore, CrumbItem } from '../../../store/crumbStore'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'

const router = useRouter()
const crumbStore = useCrumbStore()
const { crumbList } = storeToRefs(crumbStore)

const removeItem = (index: number) => {
  crumbStore.delCrumb(index)
}

const refresh = () => {
  router.go(0)
}

// @ts-ignore
router.beforeEach((to, from, next) => {
  if(to.meta.isAuth) {
    if(!to.meta.clsId) {
      next()
      return
    }
    const item: CrumbItem = {
      name: to.name as string,
      path: to.path as string,
      title: to.meta.title as string
    }
    crumbStore.addCrumb(item)
  }
  next()
})
</script>

<template>
  <div class="crumb">
    <div class="breadcrumb">
      <div class="crumbItem">
        <router-link class="itemContent"  :to="{ path: '/' }">
          <span class="itemTitle">首页</span>
        </router-link>
      </div>
      <div class="crumbItem" v-for="(item, index) in crumbList" :key="item.name">
        <router-link class="itemContent"  :to="{ path: item.path }">
          <span class="itemTitle">{{ item.title }}</span>
        </router-link>
        <el-icon class="itemIcon" color="#fff" @click="removeItem(index)">
          <Close/>
        </el-icon>
      </div>
    </div>

    <el-icon class="refresh" size="14" color="#fff" @click="refresh">
      <Refresh/>
    </el-icon>
  </div>
</template>

<style lang="less" scoped>
.crumb {
  width: 100%;
  height: 35px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .refresh {
    cursor: pointer;
    margin-right: 20px;
    background-color: @GlobalSecondaryColor;
    padding: 6px;
    border-radius: 6px;
  }
  .breadcrumb {
    // margin-left: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    .crumbItem {
      height: 70%;
      display: flex;
      align-items: center;
      background-color: @GlobalSecondaryColor;
      margin-left: 10px;
      border-radius: 4px;
      .itemContent {
        width: 95px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // padding-left: 15px;
        .itemTitle {
          color: #fff;
          font-weight: 100;
          font-size: 12px;
        }
      }
        .itemIcon {
          cursor: pointer;
          margin-right: 3px;
          margin-left: -8px;
        }
      }

    }
  }
</style>
